<template>
    <!-- 学科管理 -->
    <div class='container'>
        <div class="dashboard-container">
            <div class="app-container">
                <el-card shadow="never">
                    <!-- 上半部分 -->
                    <div class="filter-container">
                        <el-form :data="formData" ref="requestParameters">
                            <el-form-item label="学科名称">
                                <el-input size="small" @keyup.enter="handleFilter" style="width: 200px;" class="filter-item"
                                    v-model="formData.subjectName" placeholder="请输入学科名称"></el-input>
                                <el-button size="small" class="filter-item" @click="resetForm"
                                    style="margin-left: 15px;">清空</el-button>
                                <el-button size="small" class="filter-item" type="primary"
                                    @click="handleFilter">搜索</el-button>
                                <el-button class="filter-item fr" size="small" style="margin-left: 10px;"
                                    @click="showDialog = true" type="success" icon="el-icon-edit">新增学科</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 数量提示条 -->
                    <el-alert :title="alertText" type="info" show-icon class="alert" :closable="false">
                    </el-alert>

                    <!-- 下半部分 -->
                    <!-- 数据 -->
                    <div class="information">
                        <el-table v-loading="listLoading" :data="subjectsList" highlight-current-row style="width: 100%">
                            <el-table-column type="index" fixed prop="id" label="序号" width="50px">
                            </el-table-column>
                            <el-table-column prop="subjectName" label="学科名称">
                            </el-table-column>
                            <el-table-column prop="username" label="创建者">
                            </el-table-column>
                            <el-table-column prop="addDate" label="创建日期">
                                <template #default="{ row }">
                                    {{ row.addDate | parseTimeByString }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="isFrontDisplay" label="前台是否显示">
                                <template #default="{ row }">
                                    {{ row.isFrontDisplay ? '是' : '否' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="twoLevelDirectory" label="二级目录">
                            </el-table-column>
                            <el-table-column prop="tags" label="标签">
                            </el-table-column>
                            <el-table-column prop="totals" label="题目数量">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="260">
                                <template v-slot="{ row }">
                                    <!-- {{ row }} -->
                                    <el-button type="text"
                                        @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
                                    <el-button type="text"
                                        @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
                                    <el-button type="text" @click="update(row)">修改</el-button>
                                    <el-button type="text" v-if="!arr.includes(row.id)" @click="delBtn(row)">删除</el-button>
                                    <!-- v-if="row != 1 || 16 || 4" -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <el-row type="flex" justify="end" align="middle" style="height: 60px">
                            <!-- 分页器 -->
                            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="requestParameters.page" :page-sizes="[5, 10, 20, 50]"
                                :page-size="requestParameters.pagesize" layout=" prev, pager, next,sizes, jumper"
                                :total="total" />
                        </el-row>
                    </div>

                    <subjectsAdd :show-dialog.sync="showDialog" @updateForm="list" ref="update" />
                </el-card>
            </div>
        </div>

    </div>
</template>

<script>
import { list, remove, update } from '@/api/hmmm/subjects.js'
import subjectsAdd from '../components/subjects-add.vue'
export default {
    components: {
        subjectsAdd,
    },
    data() {
        return {
            arr: [1, 4],
            node: {},
            total: 0,
            listLoading: false,
            alertText: '',
            showDialog: false,
            subjectsList: [],
            formData: {
                subjectName: '',
            },
            requestParameters: {
                page: 1,
                pagesize: 10,
                subjectName: ''
            },
            addFormData: {
                subjectName: '',
                isFrontDisplay: ''
            },
            // userId: null
        }
    },
    created() {
        this.list();
    },
    methods: {

        // 渲染数据
        async list() {
            this.listLoading = true
            const res = await list(this.requestParameters)
            const { counts, items } = res.data
            // console.log(res.data);
            // this.showBtn=this.arr
            this.total = counts
            this.subjectsList = items
            this.alertText = `共 ${this.total} 条记录`
            this.listLoading = false
        },
        // currentPage 改变时会触发--当前页
        handleCurrentChange() {
            this.list();
        },
        // pageSize 改变时会触发--每页条数
        handleSizeChange(val) {
            this.requestParameters.pagesize = val;
            this.list();
        },
        // 清除
        async resetForm() {
            this.listLoading = true
            this.formData = {
                subjectName: '',
            }
            this.requestParameters.page = 1
            this.list(this.requestParameters)
            this.requestParameters.subjectName = ''
            this.listLoading = false
        },
        // 搜索信息
        handleFilter() {
            this.listLoading = true
            this.requestParameters.page = 1
            this.list(this.requestParameters)
            this.requestParameters.subjectName = this.formData.subjectName
            // this.formData.subjectName = ''
            this.listLoading = false
        },

        // 删除学科
        async delBtn(id) {
            try {
                // 提示消息
                await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                // 调用接口
                await remove(id)
                // 重置数据
                await this.list()
                // 提示删除成功
                this.$message.success('删除成功!')
                if (this.subjectsList.length === 0) {
                    this.requestParameters.page -= 1
                    this.list({...this.requestParameters})
                }
                // console.log(1);
            } catch (err) {
                console.log(err);
            }
        },
        // 修改学科
        async update(node) {
            this.showDialog = true

            await this.$refs.update.detail(node)
        }
    },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pagination {
    margin-top: 10px;
}

.filter-container {
    padding-bottom: 0px !important;
}

.information {
    margin-top: 10px;
}

.alert {
    margin-top: 10px;
}
</style>

